<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="132px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="315px">
          <a-form-item label="日期" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ style: { width: '260px' } }">
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            />
            ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="147px">
          <a-form-item label="操作人" :label-col="{ style: { width: '55px' } }">
            <JDictSelectTag
              v-model:value="queryParam.userIds"
              mode="multiple"
              dictCode="sys_user,realname,id@authUser"
              placeholder="全部"
              :maxTagCount="0"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :allowClear="true"
              :showSearch="true"
            />
          </a-form-item>
        </a-col>

        <a-col flex="108px">
          <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select v-model:value="queryParam.stat" placeholder="全部" :showArrow="false" :allowClear="true">
              <a-select-option value="0">新增</a-select-option>
              <a-select-option value="1">未审</a-select-option>
              <a-select-option value="2">经理</a-select-option>
              <a-select-option value="3">已审</a-select-option>
              <a-select-option value="9">回退</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="108px">
          <a-form-item label="方式" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select v-model:value="queryParam.sffs" placeholder="全部" :showArrow="false" :allowClear="true">
              <a-select-option value="1">转账</a-select-option>
              <a-select-option value="3">挂账</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="170px">
          <a-form-item label="采购名称" :label-col="{ style: { width: '70px' } }">
            <a-input id="dwmc" v-model:value="queryParam.dwmc" />
          </a-form-item>
        </a-col>

        <a-col flex="170px">
          <a-form-item label="订单名称" :label-col="{ style: { width: '70px' } }">
            <a-input id="pathName" v-model:value="queryParam.pathName" />
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>

      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :indentSize="8" :loading="loading" :onRowDbClick="handleDblclick"></BasicTable>
  <!-- table区域-end -->

  <BusinessCooperatorModal @register="registerBusinessCooperatorModal" ></BusinessCooperatorModal>
</template>

<script lang="ts" setup name="report-businessCooperator">
import { nextTick, reactive, ref, toRaw, unref } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { useModal } from '/@/components/Modal';
import { defHttp } from "/@/utils/http/axios";
import { filterObj } from "/@/utils/common/compUtils";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { replaceAll } from "/@/utils";
import { BusinessCooperatorModal }  from '/@/views/full/report/modules/';

import JDictSelectTag from "/@/components/Form/src/jeecg/components/JDictSelectTag.vue";
import moment from 'dayjs'


//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  ddlxIds: [],
  beginDate : momentSearchQueryDate('sub'),
  endDate: momentSearchQueryDate('add'),
  userIds: [],
  dwmc: "",
  pathName: "",
});

const resetParam = { ...queryParam };

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}

//初始化 -------------------------------------------------------------
const columns: BasicColumn[] = [
  { dataIndex: "area_name", title: "供应商", width: 400, align: "left" },
  { dataIndex: "lrr", title: "录入人", width: 60, align: "center" },
  { dataIndex: "ddlx", title: "部门", width: 70, align: "center" },
  { dataIndex: "adult_no", title: "成人", width: 60, align: "right" },
  { dataIndex: "child_no", title: "儿童", width: 60, align: "right" },
  { dataIndex: "escort_no", title: "陪同", width: 60, align: "right" },
  { dataIndex: "stat", title: "状态", width: 50, align: "center" },
  { dataIndex: "sffs", title: "支付方式", width: 70, align: "center" },
  { dataIndex: "fkje", title: "应付", width: 100, align: "right", className:"text-red-500"},
  { dataIndex: "bsb", title: "占比", width: 90, align: "right", className: "text-red-600",
    customRender: ({text, record}) => {
      let total = ( summaryData && toRaw(unref(summaryData))[0].fkje ) || 0 //summaryData[0].adult_no
      total = replaceAll(total, ',', '');
      let fkje = replaceAll(record.fkje, ',', '');
      if (fkje) {
        return (Math.round((fkje / total) * 100 * Math.pow(100, 1)) / Math.pow(100, 1)).toFixed(2) + '%';
      } else {
        return text;
      }
    }
  },
  { dataIndex: "yfk", title: "已付", width: 100, align: "right", className:"text-green-500"},
  { dataIndex: "wfk", title: "未付", width: 100, align: "right", className:"text-blue-500"},
];

// 列表页面公共参数、方法
const loading = ref<boolean>(false);
const dataSource = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    rowKey: "id",
    size: "small",
    dataSource: dataSource,
    columns: columns,
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: false,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryData: summaryData,
    onExpand: onExpand
  }
});

//注册table数据
const [registerTable, { reload, collapseAll }] = tableContext;
const url = "/report/businessCooperator";

async function loadData(params) {
  loading.value = true;
  let result = await defHttp.get({ url, params });
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren === "true" && rowData.children.length === 0) {
    let params = { ...queryParam, parent_id: rowData.id, type: rowData.type };
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value = res.rows;
    summaryData.value = res.footer;
  } else {
    dataSource.value = [];
    summaryData.value = [];
  }
}

const [registerBusinessCooperatorModal, { openModal: openBusinessCooperatorModel }] = useModal();

//双击行
function handleDblclick(record) {
  if (record.type == '1') {
    let params = { ...queryParam, parent_id: record.id, areaName: record.area_name, type: '2' };
    openBusinessCooperatorModel(true, filterObj(params));
  }
}

//
function searchQuery() {
  //reload();
  loadRootData();
  nextTick(collapseAll);
}

//默认执行查询
searchQuery();

</script>
<style scoped>
.ant-row1 > div:not(.gutter-row):nth-child(2n + 1) {
  background: rgba(0, 146, 255, .75);
}

.ant-row1 > div:not(.gutter-row) {
  padding: 16px 0;
  background: #0092ff;
}

.ant-col1 {
  position: relative;
  max-width: 100%;
  min-height: 1px;
}

/** 2022-05-30 */
.jeecg-basic-table-form-container .ant-form {
  margin: 0px;
}

.jeecg-basic-table .ant-form-item {
  margin-bottom: 5px;
}

::v-deep(.ant-table-tbody .clickRowStyl) {
  border-color: #76B4AC !important;
  background: #eee !important;
  color: #007465 !important;
}

.datagrid-row-selected {
  border-color: #76B4AC;
  background: #eee;
  color: #007465;
}

.datagrid-row-over {
  background: #F5F5F5;
  color: #444;
  cursor: default;
  font-weight: normal;
}
</style>
